<template>
    <div>
        <h2>未完成{{ num }}</h2>
        <ul>
            <li v-for="(item, index) in list" :key="index" v-show="!item.ff" :class="list">
                <input type="checkbox" v-model="item.ff">
                <span v-show="!item.is" @click="eitr(index)">{{ item.title }}</span>
                <input type="text" v-model="item.title" v-show="item.is" @blur="ssd(index)" >
                <button @click="del(index)">删除</button>
            </li>
        </ul>
        <h2>已完成{{ list.length - num }}</h2>
        <ul>
            <li v-for="(item, index) in list" :key="index" v-show="item.ff">
                <input type="checkbox" v-model="item.ff">
                <span v-show="!item.is">{{ item.title }}</span>
                <input type="text" v-model="item.title" v-show="item.is">


                <button @click="del(index)">删除</button>
            </li>
        </ul>
    </div>
</template>

<script setup>

import { ref, defineProps, computed, defineEmits,nextTick } from 'vue'

const props = defineProps({
    list: Array

})
const del = (i) => {
    props.list.splice(i, 1)
}

const num = computed(() => {
    let arr = props.list.filter(item => !item.ff)
    return arr.length
})
const eitr = (key) => {
    console.log(key);
    props.list.forEach(item => {
        return item.is = false
    })
    props.list[key].is = true
    nextTick(()=>{
        let aa=Array.from(document.querySelectorAll('.list')) 
        aa[key].focus()
    })
}
const emit = defineEmits(['sder'])
const ssd = (k) => {
    emit('sder', props.list[k].title, k)
}
</script>

<style lang="scss" scoped>
li {
    list-style: none;
}
</style>